Estoy tratando de usar ganchos de reacción para crear un desplazamiento para que aparezca un div y tengo estos problemas:
Línea 69:31: React Hook "useState" se llama en la función "renderHideOptionalClauseTrigger" que no es ni un componente de la función React ni una función React Hook personalizada react-hooks/rules-of-hooks
Busque las palabras clave para obtener más información sobre cada error.
Aquí está mi base de código:
import React, { useState, useEffect } from "react"; const renderHideOptionalClauseTrigger = () => { const [inHover, setHover] = useState(false); return ( <div className="my-option-clause"> <text>My Optional Loan Clause</text> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} > <path fill-rule="evenodd" clip-rule="evenodd" d="..."/> </svg> </div> ); }; function LoanTerms(props) { const router = useRouter(); const { currentLoan, getUserLoanRequest, updateUserLoanProposalRequest, user, } = props; return ( <> ... <Collapsible trigger={renderOptionalClauseTrigger()} classParentString="opt-data" overflowWhenOpen="visible" triggerWhenOpen={renderHideOptionalClauseTrigger()} > <div className="FlowCard__info-text"> Will be added verbatim as last clause to the loan agreement. See{" "} <Link className="orange-link" to="/product"> Product page </Link>{" "} for other clauses. (1000 characters) </div> <>React espera que los componentes de React se nombren con una primera letra mayúscula. Pruebe RenderHideOptionalClauseTrigger en lugar de renderHideOptionalClauseTrigger
Para renderizar su componente y usarlo en cualquier lugar, debe exportar el componente al final del archivo. En su caso, si desea utilizar LoanTerms , debe escribir export default LoanTerms .